<template>
  <div id="main"></div>
</template>

<script>
import E from "wangeditor";
export default {
  data() {
    return {
      editor: "",
    };
  },
  mounted() {
    // 创建 wangeditor 实例
    this.editor = new E("#main");
    // 取消自动 focus 进入默认编辑器初始化时，默认会自动 focus 到编辑区域。可通过如下操作，取消自动 focus 。
    this.editor.config.focus = false;
    // 配置 onchange 回调函数 -获取输入的值内容
    this.editor.config.onchange = (newHtml) => {
      console.log("change 之后最新的 html", newHtml);
      //获取富文本编辑的内容--传递给弹窗组件--父组件
      this.$emit("sendEditor", newHtml);
    };
    // 配置触发 onchange 的时间频率，默认为 200ms
    this.editor.config.onchangeTimeout = 500; // 修改为 500ms
    // 配置菜单栏 ，删减菜单，调整菜单
    // this.editor.config.menus = ["bold", "head", "link", "italic", "underline"];
    // 配置字体
    this.editor.config.fontNames = [
      // 对象形式 v4.6.16
      { name: "黑体", value: "黑体" },
      { name: "绝绝字体", value: "Times New Roman" },
      // 字符串形式
      "黑体",
      "仿宋",
      "楷体",
      "标楷体",
      "华文仿宋",
      "华文楷体",
      "宋体",
      "微软雅黑",
      "Arial",
      "Tahoma",
      "Verdana",
      "Times New Roman",
      "Courier New",
    ];
    this.editor.create();
  },
};
</script>

<style lang="less" scoped>
</style>